import { useRef, useEffect } from 'react';
import {
  Animated,
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
} from 'react-native';
import { Colors } from '@/contants/Colors';

type AnimatedButtonProps = {
  title: string;
  onPress: () => void;
};

const AnimatedButton: React.FC<AnimatedButtonProps> = ({ title, onPress }) => {
  const scaleValue = useRef(new Animated.Value(1)).current;
  const animatedStyle = {
    transform: [{ scale: scaleValue }], // Apply scale transformation
  };

  useEffect(() => {
    const animation = Animated.loop(
      Animated.sequence([
        Animated.timing(scaleValue, {
          toValue: 1.1, // Scale to 1.2
          duration: 800,
          useNativeDriver: true,
        }),
        Animated.timing(scaleValue, {
          toValue: 1, // Scale back to 1
          duration: 800,
          useNativeDriver: true,
        }),
      ])
    );
    animation.start();
    return () => animation.stop();
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.buttonShape, styles.animatedColor, animatedStyle]}
      ></Animated.View>
      <TouchableOpacity
        style={[styles.buttonShape, styles.tabButton]}
        onPress={() => {
          onPress();
        }}
      >
        <Text style={styles.title}>{title}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default AnimatedButton;

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginVertical: 30,
  },
  buttonShape: {
    width: 200,
    height: 60,
    borderRadius: 120,
    justifyContent: 'center',
    alignItems: 'center',
  },
  animatedColor: {
    backgroundColor: Colors.mainColor_light,
  },
  tabButton: {
    position:'absolute',
    backgroundColor: Colors.mainColor,
  },
  title: {
    color: Colors.white,
    fontSize: 22,
  },
});
